<template>
  <div>
    <!-- 这是帖子管理 -->
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">论坛管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>帖子管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="queryInfo.searchCondition.title"
                    placeholder="帖子名称"
                    clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"
                     @click="getArticleList">搜索</el-button>
          <el-button @click="reset_Search">重置</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <tree-table :data="articleList"
                  :columns="columns"
                  :selection-type='false'
                  :expand-type='false'
                  show-index
                  index-text='#'
                  border
                  :show-row-hover="false"
                  :tree-type="true"
                  children-prop="childs"
                  class="treeTable">

        <!-- 更多 -->
        <template slot="more"
                  slot-scope="scope">
          <ul class="more_icon">
            <!-- 浏览 -->
            <li>
              <i class="iconfont icon-liulan">{{scope.row.browserTimes}}</i>
            </li>
            <!-- 转发 -->
            <li>
              <i class="iconfont icon-zhuanfa1"></i>{{scope.row.forwardTimes}}
            </li>
            <!-- 点赞 -->
            <li>
              <i class="iconfont icon-zan1"></i>{{scope.row.upTotal}}
            </li>
            <!-- 回复 -->
            <li>
              <i class="iconfont icon-icon_huifu-mian"></i>{{scope.row.browserTimes}}
            </li>
          </ul>
        </template>
        <!-- 操作 -->
        <template slot="operate"
                  slot-scope="scope">
          <el-button type="danger"
                     plain
                     size="mini"
                     @click="click_delete_article_by_id(scope.row.ID)">删除</el-button>
          <el-button type="primary"
                     plain
                     size="mini"
                     @click="click_more_article_by_id(scope.row)">更多</el-button>
        </template>
      </tree-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryInfo.currentPage"
                     :page-sizes="[10, 30, 50, 100]"
                     :page-size="queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
      <!-- 审核信息对话框 -->
      <el-dialog
          title=""
          :visible.sync="forumFormVisible"
          width="55%"
          :before-close="forumFormClose">
          <el-form :model="forumForm" :rules="forumFormRules" ref="forumFormRef" label-width="70px">
                  <el-form-item label="文章题目">
                  <el-input v-model="forumForm.Title" disabled></el-input>
                </el-form-item>
                <el-form-item label="文章内容">
                  <el-input type="textarea" v-model="forumForm.Content" disabled></el-input>
                </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
            <el-button type="primary" @click="forumFormVisible = false">关闭</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
export default { 
  data() {
    return {
      queryInfo: {
        currentPage: 1,
        pageSize: 10,
        searchCondition: {
          // 帖子的名称, 对于用户来说, 只能知道题目的存在, ID和文章的ID都是未知的
          title: '',
        }
      },
      // 文章信息的数据列表, 默认为空
      articleList: [],
      // 总数据条数
      total: 0,
      // 为table指定列的定义
      columns: [
        {
          label: '文章标题',
          prop: 'Title'
        },
        {
          label: '文章ID',
          prop: 'ID'
        },
        {
          label: '作者',
          prop: 'UserRegisterID'
        },
        {
          label: '发帖时间',
          prop: 'CreatedAt'
        },
        {
          label: '热度',
          type: 'template',
          template: 'more',
          minWidth: '200px',
        },
        {
          label: '操作',
          type: 'template',
          template: 'operate'
        }
      ],
        forumFormVisible: false,
        forumForm: [],
    }
  },
  created() {
    // 生命周期函数内调用这个方法  获取列表
    this.getArticleList()
  },
  methods: {
    // 获取帖子列表
    async getArticleList() {
      // this.articleList = []
      const { data: res } = await this.$http.post(
        'forum/getlistarticle', this.queryInfo.searchCondition.title)

      // console.log(res, this.queryInfo)
      if (res.code !== 200) {
        return this.$Message.error('获取文章信息失败')
      }
       this.articleList = res.data.data
      // 把数据列表,赋值给catelist
      // var list = res.data.data
      // list.forEach( async item => {
      //   item.UserRegisterID = await this.getUserName(item.UserRegisterID)
      //   this.articleList.push(item)
      // })
      // 为总数据条数赋值
      this.total = res.data.data.length
    },
    // 监听pagesize改变
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getArticleList()
    },
    // 监听currentPage改变
    handleCurrentChange(newPage) {
      this.queryInfo.currentPage = newPage
      this.getArticleList()
    },
    // 监听搜索框重置
    reset_Search() {
      //  先重置输入框  再发起数据请求,获取最新的列表
      this.queryInfo.searchCondition.id = ''
      this.queryInfo.searchCondition.title = ''
      this.queryInfo.searchCondition.userId =''
      this.getArticleList()
    },
    // 监听删除文章
    click_delete_article_by_id(id) {
      console.log(id)
    },
    // 监听更多按钮
    click_more_article_by_id(item) {
      console.log(item)
      this.forumForm = item
      this.forumFormVisible = true

    },
    async click_delete_article_by_id(id){
      console.log(id)
      const { data: res } = await this.$http.delete(`forum/deletearticle/${id}`)
      if (res.code !== 200) {
        return this.$Message.error('删除失败')
      }
      this.getArticleList()
    },
    // 监听展示信息的退出
    forumFormClose() {
      this.$refs.forumFormRef.resetFields()
    },
    // async getUserName(userId){
    //   const { data: res } = await this.$http.get(`user/getid/${userId}`)
    //   if(res.code != 200) return;

    //   return res.text;
    // }
  }
}
</script>
<style lang="less" scoped>
.treeTable {
  margin-top: 15px;
}

.more_icon {
  margin: 0;
  padding: 0;
  li {
    text-align: center;
    float: left;
    list-style: none;
    height: 20px;
    margin: 4px;
    font-size: 12px;
    line-height: 20px;
    font-style: normal;
    color: #666;
    > i.iconfont {
      line-height: 20px;
      margin: 0 2px;
      font-size: 12px;
      color: #666;
    }
  }
}
</style>